<template>
  <header>
    <span @click.stop="$openPage('/order')"><el-icon size="18">
        <Back />
      </el-icon></span>
    <h3>{{ $t("language.informcao.title") }}</h3>
    <strong></strong>
  </header>
  <div style="height: 73px"></div>
  <main class="main">
    <img src="@/assets/img/pix.png" alt="" />
    <p>{{ $t("language.informcao.text1") }}</p>
    <p>{{ $t("language.informcao.text2") }}</p>
    <p><strong>{{ $t("language.informcao.text3") }}</strong>{{ $t("language.informcao.text4") }}</p>
    <div id="qrCodeBox"></div>
    <div class="copy" @click="copyToClipboard(paymentinfo.qrCode,proxy)">
      <el-icon color="#0B6BFF" size="16" >
        <document />
      </el-icon>
      {{ $t("language.informcao.copy") }}
    </div>
    <!-- <img src="@/assets/img/idd.png" alt="" />
    <ul>
      <li>9e20d163180d4ee789f02b18f77b5578</li>
      <li>
        <span>{{ $t("language.informcao.price") }}</span>
        <strong>30 {{ $t("language.informcao.money") }}</strong>
      </li>
    </ul>
    <div>
      <p>{{ $t("language.informcao.text1") }}</p>
      <p>{{ $t("language.informcao.text2") }}</p>
      <div id="qrCodeBox"></div>
      <div class="copy">
        <span>{{ $t("language.informcao.color") }}</span>
        
      </div>
    </div>
    <h3>
      <span>{{ $t("language.informcao.power") }}</span>
      <img src="@/assets/img/pix.png" alt="" />
    </h3> -->
  </main>
</template>
<script setup lang="ts">
import { copyToClipboard } from "@/utils/common";
import { useStore } from "vuex"
import { onMounted, getCurrentInstance, nextTick, ref,computed, reactive } from "vue";
import QRCode from 'qrcodejs2-fix';
const { proxy } = getCurrentInstance();
const store = useStore()
let paymentinfo:any = computed(()=>store.state.Orderinfo)
// 生成方法
const getQrCode = () => {
  // 获取支付信息
  nextTick(() => {
    document.getElementById('qrCodeBox').innerHTML = '';
    new QRCode(document.getElementById('qrCodeBox'), {
      text: paymentinfo.value.payUrl, // 扫码后显示的内容, 如果页面链接, 扫码后会直接跳转到链接
      width: 160, //二维码宽
      height: 160, //二维码高
    });
  });
}
onMounted(() => {
  if (paymentinfo.value.payUrl) {
    getQrCode();
  }

});


// onMounted(async () => {
//   const canvas = await QRCode.toDataURL(text);
//   qrCodeSrc.value = canvas;
// });
</script>
<style scoped lang="scss">
header {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 30px 15px 9px;
  color: #fff;

  span {
    display: block;
    height: 30px;
    width: 30px;
    @include flex(row, center, center);
    border: 2px solid #fff;
    border-radius: 16px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  strong {
    width: 34px;
    height: 34px;
    display: block;
  }

  dl {
    flex: 1;
    @include flex(row, center, center);

    dd {
      color: #8e8e8c;
      font-size: 18px;
      position: relative;
    }

    .active {
      color: #fff;

      &::after {
        content: "";
        position: absolute;
        width: 60%;
        bottom: -4px;
        height: 2px;
        background-color: #fff;
        margin-left: -30%;
        left: 50%;
      }
    }

    dd+dd {
      margin-left: 20px;
    }
  }
}

.main {
  width: 100%;
  height: 100%;
  padding: 50px 0 0 0;
  @include flex(column, flex-start, center);

  #qrCodeBox {
    margin-top: 30px;
  }

  >img {
    height: 50px;
    display: block;
    margin-bottom: 20px;
  }

  p {
    width: 75%;
    text-align: center;
    color: #525252;

    strong {
      color: #525252;
    }
  }

  .copy {

    background: #E6F0FF;
    color: #0B6BFF;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    padding: 12px 18px;
    margin-top: 25px;
  }
}
</style>
